<template>
	<div class="es-block">
		<Title>12小内报警记录</Title>
		<div class="table-wrapper">
			<el-table :data="records" height="460" size="large" empty-text="暂无数据">
				<el-table-column prop="channel.name" label="频率" />
				<el-table-column prop="channel.platform.name" label="台站" />
				<el-table-column prop="type" label="类型" />
				<el-table-column prop="source" label="来源" />
				<el-table-column prop="time" label="报警时间" width="300" />
				<el-table-column prop="status" label="状态" width="120">
					<template #default="scope">
						<el-text :type="statusType(scope.row.status)">{{
							scope.row.status
						}}</el-text>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ElTable, ElTableColumn, ElText } from "element-plus";
import Title from "../Title.vue";
import { inject } from "vue";
import type { Ref } from "vue";
import { Alarm } from "../../types";

const records = inject("records") as Ref<Alarm[]>;

const statusType = (status: string) => {
	if (status === "报警") {
		return "danger";
	} else if (status === "恢复") {
		return "success";
	}
	return "";
};
</script>

<style lang="scss" scoped>
.es-block {
	width: 100%;
	height: 100%;
}

.table-wrapper {
	margin-top: 20px;
}
</style>
